<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js图片和视频查看器插件 - 站长素材</title>

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" href="css/main.css">

</head>
<body>
<div class="main">
	<div id="image_container" class="container">
	  <h3>图片</h3>
	  <p>Click thumbnails to load larger images. Loading spinner &amp; captions are built-in.</p>
	  <div class="flex">
		<img src="img/photo1_thumb.jpg"/>
		<img src="img/photo7_thumb.jpg"/>
		<img src="img/photo2_thumb.jpg" caption="Example of an optional caption. You can put words here."/>
		<img src="img/photo3_thumb.jpg"/>
	  </div>
	</div>

	<div id="video_container" class="container">
	  <h3>视频</h3>
	  <p>支持Youtube, Vimeo和超链接。任何元素触发都可以触发弹出查看器。例如，点击这个超链接弹出一段<span class="text-trigger htmlvid" vidSrc="videos/panda.mp4">熊猫的视频</span>。</p>
	  <div class="flex">
		<div class="vid htmlvid" style="background-image:url(img/vid_towers.jpg)" vidSrc="http://sc.chinaz.com/"></div>
		<div class="vid youtube" style="background-image:url(img/3.jpg)" ytSrc="tU1b1H2EWU4"></div>
		<div class="vid youtube" style="background-image:url(img/4.jpg)" ytSrc="rTi9FKuMNKQ"></div>
		<div class="vid youtube" style="background-image:url(img/5.jpg)" ytSrc="z_PeaHVcohg"></div>
		<div class="vid vimeo" style="background-image:url(img/6.jpg)" vimeoSrc="119287310"></div>
		<div class="vid vimeo" style="background-image:url(img/7.jpg)" vimeoSrc="154174852"></div>
	  </div>
	</div>

	<div id="local_image_container" class="container">
	  <h3>本地图片</h3>
	  <p>Normal image elements resized with css</p>
	  <div class="flex">
		<img src="img/background3.jpg"/>
		<img src="img/background4.jpg" caption="Another optional caption."/>
		<img src="img/background6.jpg"/>
	  </div>
	  <p>Elements with background-images. Script extracts the image automatically.</p>
	  <div id="background_images" class="flex">
		<div class="background-image" style="background-image:url(img/background2.jpg)"></div>
		<div class="background-image" style="background-image:url(img/background5.jpg)"></div>
		<div class="background-image" style="background-image:url(img/background1.jpg)" caption="You can use captions with any kind of element."></div>
	  </div>
	</div>

	<div class="container" id="broken_container">
	  <h3>错误处理</h3>
	  <p>If your remote link is 404, or the display element throws an error, the user will receive an alert.</p>
	  <div class="flex">
		<img id="broken_image" src="img/broken_thumb.jpg"/>
		<div id="broken_vid" class="vid htmlvid" style="background-image:url(img/vid_towers.jpg);width:480px;margin:.2em"></div>
	  </div>
	  <p>If the vimeo / youtube URL is incorrect, the embed is shown with the error.</p>
	  <div class="flex">
		<div class="vid youtube" style="width:480px;background-image:url(img/2.jpg)"></div>
		<div class="vid vimeo" style="width:480px;background-image:url(img/3.jpg)"></div>
	  </div>
	</div>
</div>

<script src="dist/BigPicture.js"></script>
<script>
  (function() {

	function setClickHandler(id, fn) {
	  document.getElementById(id).onclick = fn;
	}

	setClickHandler('image_container', function(e) {
	  e.target.tagName === 'IMG' && BigPicture({
		el: e.target,
		imgSrc: e.target.src.replace('_thumb', '')
	  });
	});

	setClickHandler('local_image_container', function(e) {
	  (e.target.tagName === 'IMG' || e.target.className === 'background-image') &&
		BigPicture({
		  el: e.target
		});
	});

	setClickHandler('video_container', function(e) {
	  var className = e.target.className;
	  ~className.indexOf('htmlvid') &&
		BigPicture({
		  el: e.target,
		  vidSrc: e.target.getAttribute('vidSrc')
		});
	  ~className.indexOf('vimeo') &&
		BigPicture({
		  el: e.target,
		  vimeoSrc: e.target.getAttribute('vimeoSrc')
		});
	  ~className.indexOf('youtube') &&
		BigPicture({
		  el: e.target,
		  ytSrc: e.target.getAttribute('ytSrc')
		});
	})

	setClickHandler('broken_container', function(e) {
	  e.target.id === 'broken_image' &&
		BigPicture({
		  el: e.target,
		  imgSrc: '/nopic.jpg'
		});
	  e.target.id === 'broken_vid' &&
		BigPicture({
		  el: e.target,
		  vidSrc: '/novid.mp4'
		});
	  ~e.target.className.indexOf('vimeo') &&
		BigPicture({
		  el: e.target,
		  vimeoSrc: 'ajoiejlkr'
		})
	  ~e.target.className.indexOf('youtube') &&
		BigPicture({
		  el: e.target,
		  ytSrc: 'oijlksdjf'
		})
	});

  })();
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>